<template>
  <div calss="container">
    <button @click="saveVuex">vuex存值</button>
    <div>{{ this.$store.state.cart.shop }}</div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 方法集合
  methods: {
    ...mapState("user", ["userInfo"]),
    ...mapActions("user", ["setUserAsync"]),
    ...mapMutations("user", ["setUser"]),
    ...mapActions("cart", ["setShopAsync"]),
    saveVuex() {
      // dispatch触发action里面的方法
      // commit 触发的是mutations里面的方法
      // this.$store.dispatch("user/setUser", { name: "张三", sex: "18" });
      // this.$store.commit("user/setUser", { name: "李四", sex: "18" });

      this.setUserAsync({ name: "李四", sex: "18" });
      this.setShopAsync("张三");
      this.setUser({ name: "张三", sex: "18" });
    },
  },
  // 生命周期 - DOM元素渲染前调用
  created() {
    console.log(this.$store.state.cart.shop);
  },
  // 生命周期 - DOM元素渲染后调用
  mounted() {},
  components: {},
};
</script>
<style lang='less' scoped>
</style>
